<template>
	<view class="zone">
		<Header title="道侣"></Header>
		<view class="main">
			<view class="tabs">
				<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
					@click="changeTab(item.id)">
					{{item.name}}
				</view>
			</view>
			<view class="info">
				<view class="sbox" v-if="stat==1">
					<view class="name">
						{{itemlist.name ? itemlist.name : '未选择'}}
						<view class="qiansan" @click="openLeave" v-if="itemlist.name">遣散</view>
					</view>
					<view v-if="mydaolv.length != 0" :class="['renbox', mydaolv[xuanzeIDs].level == 0 ? 'vis' : '']">
						<view class="ren ">
							<image :class="['ren',mydaolv[xuanzeIDs].level == 0?'vis':'']"
								v-if="mydaolv[xuanzeIDs].level == 0"
								src="http://image.qxgm.site/tdz/img/daolv/mg-06.png" mode="widthFix">
							</image>
							<image class="ren" v-else
								:src="`http://image.qxgm.site/tdz/img/daolu/img${itemlist.img_index}.gif`"
								mode="widthFix"></image>
						</view>
						<view class="aihao">
							<view class="ai1">
								爱好
							</view>
							<text
								class="ai2">“{{itemlist.like_type == 1 ? '琴' : itemlist.like_type == 2 ? '棋' : itemlist.like_type == 3 ? '书' : '画'}}”</text>
						</view>
						<view class="ailist">
							<image v-for="(item1,index) in 5" :key="index" class="aixing"
								:src="index > (itemlist.star == 0 ? -1 : itemlist.star - 1) ? 'http://image.qxgm.site/tdz/img/daolv/mg-11.png':'http://image.qxgm.site/tdz/img/daolv/mg-12.png'"
								mode="widthFix"></image>
						</view>
					</view>
					<view class="btns">
						<view class="btnleft">
							<view class="tinx">
								赠送礼物可增加爱心
							</view>
							<view class="zengs" @click="send=true">
								赠送礼物
							</view>
						</view>
						<view class="btnleft">
							<view class="tinx">
								当前好感度:{{itemlist.star}}心 <br>
								双修可增加{{itemlist.add_experience}}修为
							</view>
							<view class="zengs2" @click="loveadd">
								双修
							</view>
						</view>
					</view>
					<view class="gbox">
						<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix">
						</image>
						<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix">
						</image>
						<view class="box">
							<view class="title">
								<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
								<text>我的道侣</text>
								<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
							</view>
							<view class="gboxlist">
								<view :class="['gpart',item.is_open == 0?'filter':'']" v-for="(item,index) in mydaolv"
									:key="index" @click="choose(item,index)">
									<image v-if="item.is_open == 0" class="suyuoo"
										src="http://image.qxgm.site/tdz/img/equipment/mg-12.png" mode="widthFix">
									</image>
									<view :class="['glv',item.level == 0 ?'vis':'']">
										{{item.grade_name}}{{item.grade_level}}
									</view>
									<image v-if="item.level == 0" class="gimgbx"
										src="http://image.qxgm.site/tdz/img/daolv/smg-01.png" mode="widthFix">
										<image v-else class="gimgbx"
											:src="`http://image.qxgm.site/tdz/img/daolu/mg${item.img_index}.png`"
											mode="widthFix">
										</image>

									</image>
									<view :class="['gnamenl',item.level == 0?'vis':'']">
										{{item.name}}
									</view>
									<view class="ahab" v-if="item.is_open == 0 && item.level != 0">
										<text class="red">未拥有</text>
									</view>
									<view class="ahab" v-else-if="item.is_open == 0">
										<text class="red">VIP{{item.vip}}</text>解锁
									</view>
									<view class="ahab" v-else>
										今日:<text class="red">{{item.love_time}}</text>/{{item.love_number}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="sbox" v-if="stat==2">
					<view class="daolbox">
						<view class="opart" v-for="(item,index) in daolv" :key="index">
							<view class="op1">
								{{item.name}}
							</view>
							<view class="op2">
								<view class="aihao1">
									爱好
								</view>
								<view class="aihao2">
									“{{item.like_type == 1 ? '琴' : item.like_type == 2 ? '棋' : item.like_type == 3 ? '书' : '画'}}”
								</view>
							</view>
							<view class="op3">
								{{item.grade_name}}{{item.grade_level}}
							</view>
							<view class="yuanhuan">
								<image class="ytou"
									:src="`http://image.qxgm.site/tdz/img/daolu/mg${item.img_index}.png`"
									mode="widthFix"></image>
							</view>
							<view class="huafeil">
								{{item.lingshi}}灵石
							</view>
							<view class="yqdao" @click="daoadd(index)">
								邀请
							</view>
						</view>
					</view>
					<view class="btns">
						<view class="btnleft">
							<view class="tinx">
							</view>
							<view class="zengs" @click="refreshfun">
								道具刷新
							</view>
						</view>
						<view class="btnleft">
							<view class="tinx">
								消耗{{lingshi}}灵石
							</view>
							<view class="zengs2" @click="shuaxin">
								灵石刷新
							</view>
						</view>
					</view>
					<view class="gbox">
						<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix">
						</image>
						<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix">
						</image>
						<view class="box">
							<view class="title">
								<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
								<text>玩法说明</text>
								<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
							</view>
							<view class="gbsoxlist">
								<view class="wanfp">
									1.每日24点自动刷新一次
								</view>
								<view class="wanfp">
									2.消耗灵石刷新价格会逐渐增加
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 赠送礼物 -->
		<u-mask :show="send" :zoom='false' @click="send = false">
			<view :class="['warp3',send==true?'showHandler':'hideHandler'] " @tap.stop>
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info3">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>赠送礼物</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<view class="tantabs">
							<view :class="['tab',tanStat==item.id?'act':'']" v-for="(item,index) in tanlist"
								:key="index" @click="changeTan(item.id)">
								{{item.name}}
							</view>
						</view>
						<scroll-view scroll-y="true" class="gundong">
							<view class="caolist">
								<view class="link" v-for="(item,index) in giftlist[tanStat]" :key="index">
									<view class="cpart">
										<image class="cq1" :src="item.img" mode="widthFix"></image>
									</view>
									</image>
									<view class="cname">
										{{item.name}}*{{Math.floor(item.number)}}
									</view>
									<view :class="['zhuang',item.number == 0?'filet':'']"
										@click="zsgift(item.id,item.number)">
										赠送
									</view>
								</view>
								<view class="empty" v-if="giftlist[tanStat].length == 0">
									<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
									暂无数据
								</view>
							</view>
						</scroll-view>

						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="sendAll" @click="sendall">赠送全部</u-button>
					</view>
				</view>
				<image class="m_close3" @click="send = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>
		<!-- 次数不足 -->
		<u-mask :show="refine">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>次数不足</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">
							<view class="rep1">
								今日已与<text class="red">{{itemlist.name}}</text>双修过了，每日只能免费双修一次。
							</view>
							<view class="rep1">
								请注意仙体 如需双修可使用<text class="red">合欢丹</text>增加次数！
							</view>
							<view class="tboan">
								<image class="tbimg" src="http://image.qxgm.site/tdz/img/daolv/smg-03.png"
									mode="widthFix"></image>
								<view class="uoan">
									<view class="an1" v-if="pilllist.length != 0">
										合欢丹*{{Math.floor(pilllist[0].number)}}
									</view>
									<view class="an2">
										使用合欢丹可增加一次道侣双修次数
									</view>
								</view>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="refineCon" @click="usepill">使用</u-button>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="refine = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 道具刷新 -->
		<u-mask :show="refresh" :zoom='false' @click="refresh = false">
			<view :class="['warp3',refresh==true?'showHandler':'hideHandler'] " @tap.stop>
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info4">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>道具刷新</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<view class="caolist2">
							<view class="link" v-for="(item,index) in refreshlist" :key="index">
								<view class="cpart">
									<image class="cq1" :src="item.img" mode="widthFix"></image>
								</view>
								</image>
								<view class="cname">
									{{item.name}}*{{Math.floor(item.number)}}
								</view>
								<view :class="['zhuang',item.number == 0?'filet':'']"
									@click="zengsong(item.id,item.number)">
									使用
								</view>
							</view>
							<view class="empty" v-if="refreshlist.length==0">
								<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
								暂无数据
							</view>
						</view>
					</view>
				</view>
				<image class="m_close3" @click="refresh = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>

		<!-- 双修动画 -->
		<u-mask :show="major" :zoom='false' @click="major = false">
			<view class="donghuabox">
				<view class="animal" @tap.stop>
					<image class="ani" src="http://image.qxgm.site/tdz/img/daolv/donghua1.png" mode="widthFix"></image>
					<image class="ani1" src="http://image.qxgm.site/tdz/img/daolv/donghua2.png" mode="widthFix"></image>
					<view class="anmbox">
						<view class="anbxo">
							<br><br><br><br><br><br>
							<image :class="['renwu1',major?'translate':'']"
								:src="`http://image.qxgm.site/tdz/img/home/${renimg}.gif`" mode="widthFix"></image>
							<image class="xingdong" src="http://image.qxgm.site/tdz/img/daolv/donghua.gif"
								mode="widthFix"></image>
							<image :class="['renwu2',major?'translate2':'']"
								:src="`http://image.qxgm.site/tdz/img/daolu/img${itemlist.img_index}.gif`" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</u-mask>

		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view class="clst1">
								恭喜您！
							</view>
							<view class="clst2">
								获得<text class="tcolor">{{getxiuwei}}</text>修为
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>
		<!-- 遣散道侣 -->
		<u-mask :show="demobilize">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>遣散道侣</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<p class="tanp1">您确定要遣散此道侣？</p>
							<view class="tannamen">
								{{itemlist.name}}({{itemlist.grade_name}}{{itemlist.grade_level}})
							</view>
							<image class="tandaok"
								:src="`http://image.qxgm.site/tdz/img/daolu/mg${itemlist.img_index}.png`"
								mode="widthFix">
							</image>
							<view class="ailist">
								<image v-for="(item1,index) in 5" :key="index" class="aixing"
									:src="index > (itemlist.star == 0 ? -1 : itemlist.star - 1) ? 'http://image.qxgm.site/tdz/img/daolv/mg-11.png':'http://image.qxgm.site/tdz/img/daolv/mg-12.png'"
									mode="widthFix"></image>
							</view>
							<view class="anaono">
								遣散后不可撤销，茫茫人海中将再无
								可能相见。
							</view>

							<view class="btnss">
								<view class="btn1" @click="demobilize=false">
									再想想
								</view>
								<view class="btn2" @click="leave">
									确认遣散
								</view>
							</view>


						</view>
					</view>
				</view>
				<image class="m_close" @click="demobilize=false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 道侣的馈赠 -->
		<u-mask :show="present">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>道侣的馈赠</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<image class="tandaok2"
								:src="`http://image.qxgm.site/tdz/img/daolu/mg${itemlist3.img_index}.png`"
								mode="widthFix">
							</image>
							<p class="tanp11">{{itemlist3.name}}</p>
							<p class="tanp22">相逢就是缘分，赠君此物留作纪念</p>

							<view class="tkann">
								<image class="tking" :src="kuizimg" mode="widthFix"></image>
								<view class="zbha" style="text-align: center;">
									{{kuizname}}
								</view>
							</view>
							<view class="refineCon2" @click="present = false" style="text-align: center;">
								收下
							</view>

						</view>
					</view>
				</view>
				<image class="m_close" @click="present = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				present: false,
				demobilize: false,
				getxiuwei: '',
				obtain: false,
				major: false,
				refresh: false,
				tablist: [{
						id: 1,
						name: '我的道侣',
						isrequest: false,
					},
					{
						id: 2,
						name: '招募道侣',
						isrequest: false,
					},

				],
				tanlist: [{
						id: 0,
						name: '全部',
						isrequest: false,
					},
					{
						id: 1,
						name: '琴',
						isrequest: false,
					},
					{
						id: 2,
						name: '棋',
						isrequest: false,
					},
					{
						id: 3,
						name: '书',
						isrequest: false,
					},
					{
						id: 4,
						name: '画',
						isrequest: false,
					},
				],
				daolv: [],
				mydaolv: [], //我的道侣
				refreshlist: [], //道具刷新
				giftlist: {
					0: [],
					1: [],
					2: [],
					3: [],
					4: [],
				}, //礼物列表
				stat: 1,
				tanStat: 0,
				lingshi: '',
				send: false,
				refine: false,
				itemlist: {},
				itemlist2: {},
				itemlist3: {},
				pilllist: [], //丹药列表
				xuanzeIDs: 0,
				kuizname: '',
				kuizimg: '',
				userinfo: uni.getStorageSync('userinfo'),
				renimg: 0, //人物ID
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {
			this.daoindex() //我的道侣首页

			this.gift(0) //礼物列表

		},
		methods: {
			getUserInfo() {

				if (this.userinfo.level >= 1 && this.userinfo.level <= 4) {
					this.renimg = 1
				} else if (this.userinfo.level >= 5 && this.userinfo.level <= 8) {
					this.renimg = 2
				} else if (this.userinfo.level >= 9 && this.userinfo.level <= 12) {
					this.renimg = 3
				} else if (this.userinfo.level >= 13 && this.userinfo.level <= 16) {
					this.renimg = 4
				} else if (this.userinfo.level >= 17 && this.userinfo.level <= 20) {
					this.renimg = 5
				} else if (this.userinfo.level >= 21 && this.userinfo.level <= 24) {
					this.renimg = 6
				} else if (this.userinfo.level >= 25 && this.userinfo.level <= 28) {
					this.renimg = 7
				} else if (this.userinfo.level >= 29 && this.userinfo.level <= 32) {
					this.renimg = 8
				} else if (this.userinfo.level >= 33 && this.userinfo.level <= 36) {
					this.renimg = 9
				} else if (this.userinfo.level >= 37 && this.userinfo.level <= 40) {
					this.renimg = 10
				} else if (this.userinfo.level >= 41 && this.userinfo.level <= 44) {
					this.renimg = 11
				} else if (this.userinfo.level >= 45 && this.userinfo.level <= 48) {
					this.renimg = 12
				}

			},
			choose(item, index) {
				if (item.level != 0) {
					this.itemlist = item
					this.itemlist2 = item
					this.xuanzeIDs = index
					console.log(this.itemlist);
				} else {
					this.$u.toast('请招募道侣')
				}
			},
			//道侣首页
			async daoindex() {
				let res = await this.$http.index.daoindex()
				if (res.code == 1) {
					this.mydaolv = res.data

					if (!this.itemlist.daolv_id) {
						this.itemlist = this.mydaolv[0]
						this.itemlist2 = this.mydaolv[0]
						console.log(this.itemlist);
					} else {
						let prizeIndex = this.mydaolv.findIndex(item => {
							return item.daolv_id === this.itemlist.daolv_id
						})
						this.itemlist = this.mydaolv[prizeIndex]
						this.itemlist2 = this.mydaolv[prizeIndex]
					}

				}
			},
			//道侣列表
			async freshlist() {
				let res = await this.$http.index.freshlist()
				if (res.code == 1) {
					this.daolv = res.data.daolv_list
					// console.log(this.daolv);
					this.lingshi = res.data.lingshi
				}
			},
			//刷新道具列表
			async refreshfun() {
				let res = await this.$http.index.freshprops()
				if (res.code == 1) {
					this.refreshlist = res.data
					this.refresh = true
				}
			},
			//刷新道侣列表(灵石刷新)
			async shuaxin() {
				let res = await this.$http.index.daofresh({
					props_id: 0
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.freshlist()
				}
			},
			//刷新道侣列表(道具刷新)
			async zengsong(id, number) {
				if (number == 0) {
					this.$u.toast('此道具不足')
					return
				}

				let res = await this.$http.index.daofresh({
					props_id: id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.freshlist()
					this.gift()
					this.refresh = false
				}
			},
			//邀请道侣
			async daoadd(inedx) {
				let res = await this.$http.index.daoadd({
					index: inedx
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.daoindex() //我的道侣首页
					this.freshlist()
				}
			},
			//礼物列表
			async gift(type) {
				console.log(11111)
				if (this.tanlist[type].isrequest == false) {
					let res = await this.$http.index.gift({
						type: type ? type : 0
					})
					if (res.code == 1) {
						this.giftlist[type] = res.data //礼物列表
						this.tanlist[type].isrequest = true
					}

				}
			},
			//赠送礼物
			async zsgift(id, number) {
				if (number == 0) {
					this.$u.toast('此道具不足')
					return
				}
				if (this.itemlist.level == 0 || !this.itemlist.daolv_id) {
					this.$u.toast('请选择需要赠送的道侣')
					return
				}
				let res = await this.$http.index.sendgift({
					props_id: id,
					daolv_id: this.itemlist.daolv_id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.tanlist[this.tanStat].isrequest = false
					this.gift(this.tanStat) //礼物列表
					this.daoindex() //道侣列表
					this.send = false //关闭礼物框
				}
			},
			//全部赠送
			async sendall() {
				if (this.itemlist.level == 0 || !this.itemlist.daolv_id) {
					this.$u.toast('请选择需要赠送的道侣')
					return
				}

				if (this.giftlist.length == 0) {
					this.$u.toast('你选择需要赠送的礼物')
					return
				}

				let res = await this.$http.index.sendall({
					like_id: this.tanStat,
					daolv_id: this.itemlist.daolv_id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.tanStat = 0
					this.tanlist[this.tanStat].isrequest = false
					this.gift(0) //礼物列表
					this.daoindex() //道侣列表
					this.send = false //关闭礼物框
				}
			},
			// 遣散
			openLeave() {
				this.itemlist3 = this.itemlist2
				this.demobilize = true
			},
			//确认遣散
			async leave() {
				if (this.itemlist.level == 0 || !this.itemlist.daolv_id) {
					this.$u.toast('请选择需要遣散的道侣')
					return
				}
				uni.showLoading({
					title: "正在遣散",
					mask: true,
				})
				let res = await this.$http.index.leave({
					daolv_id: this.itemlist.daolv_id
				})
				if (res.code == 1) {
					this.demobilize = false
					setTimeout(() => {
						this.itemlist = {} //我的道侣首页
						this.daoindex() //我的道侣首页
						uni.hideLoading()
					}, 300)
					if (res.data.img) {
						this.kuizimg = res.data.img
						this.kuizname = res.data.name
						this.present = true
					} else {
						this.$u.toast(res.msg)
					}
				}
			},

			//双修
			async loveadd() {
				if (this.itemlist.level == 0 || !this.itemlist.daolv_id) {
					this.$u.toast('请选择需要双修的道侣')
					return
				}
				let res = await this.$http.index.loveadd({
					daolv_id: this.itemlist.daolv_id
				})

				if (res.code == 1) {
					this.major = true
					this.daoindex() //我的道侣首页
					// this.$u.toast(res.msg)
					setTimeout(() => {
						this.major = false
						this.getxiuwei = res.data
						this.obtain = true
					}, 3000)
				} else if (res.code == 0) {
					if (res.msg = '双修次数不足') {
						this.pill()
						this.refine = true

					}
				} else {
					this.$u.toast(res.msg)
				}

			},
			//丹药列表
			async pill() {
				let res = await this.$http.index.pill()
				if (res.code == 1) {
					this.pilllist = res.data //丹药列表
				}
			},
			//使用丹药
			async usepill() {
				let res = await this.$http.index.usepill({
					daolv_id: this.itemlist.daolv_id,
					props_id: this.pilllist[0].id
				})
				if (res.code == 1) {
                    this.getxiuwei = res.data
					this.refine = false
					this.major = true
					this.pill() //丹药列表
					this.daoindex() //我的道侣首页
					setTimeout(() => {
						this.major = false
                        this.obtain = true
					}, 3000)
				} else {
					this.$u.toast(res.msg)
				}
			},
			// 切换
			changeTab(id) {
				this.stat = id
				if (id = 2 && this.daolv.length == 0) {
					this.freshlist() //道侣列表
				}
			},
			// 赠送礼物切换
			changeTan(id) {
				this.tanStat = id
				this.gift(id)
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/daolv/bg.png) no-repeat;
		background-size: 100% auto;
	}

	.tabs {
		width: 86%;
		padding: 8px 16px;
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/lingchong/mg-04.png) no-repeat;
		background-size: 100% 100%;
		margin-bottom: 9px;

		.tab {
			width: 33%;
			background: url(http://image.qxgm.site/tdz/img/public/tab2.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			margin-right: 5px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/public/tab1.png) no-repeat;
			background-size: 100% 100%;
		}
	}


	.gbox {
		position: relative;
		width: 100%;
		margin-top: 3vh;
	}

	.name {
		position: relative;
		display: block;
		margin: 0 auto;
		width: 50%;
		font-size: 16px;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 16px;
		text-align: center;
		padding: 14px 0;
		background: url(http://image.qxgm.site/tdz/img/daolv/mg-04.png) no-repeat;
		background-size: 100% 100%;
	}

	.qiansan {
		position: absolute;
		right: 0;
		top: 9px;
		width: 54px;
		text-align: center;
		height: 25px;
		font-size: 12px;
		font-weight: normal;
		color: #fdf2c5;
		line-height: 25px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
		background-size: 100% 100%;
	}

	.renbox {
		position: relative;
		width: 100%;

		.ren {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;

			image {
				width: 75%;
			}
		}

		.aihao {
			position: absolute;
			right: 9%;
			top: 0;
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/daolv/mg-05.png) no-repeat;
			background-size: 100% 100%;
			width: 70px;
			height: 70px;
			box-sizing: border-box;
			padding: 11px 0px 13px;
		}

		.ai1 {
			font-size: 15px;
			font-weight: normal;
			color: #fcfcfd;
			line-height: 15px;
			margin-bottom: 8px;
		}

		.ai2 {
			font-size: 24px;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 24px;
			background: linear-gradient(0deg, #FFECB2 0%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.ailist {
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
			bottom: 0;
			display: flex;
			align-items: center;

			image {
				width: 41px;
			}
		}


	}

	.btns {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 0 11%;
		margin-top: 1vh;

		.tinx {
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 12px;
			text-shadow: 0 1px 1px #6D4B29;
			text-align: center;
		}

		.zengs {
			width: 113px;
			text-align: center;
			height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #cff7f8;
			line-height: 37px;
			text-shadow: 0 1px 1px #006599;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.zengs2 {
			width: 113px;
			text-align: center;
			height: 37px;
			font-size: 18px;
			font-weight: normal;
			color: #fdf2c5;
			line-height: 37px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/youchai/mg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}


	.ping1 {
		width: 100%;
		display: flex;
	}

	.yun {
		position: absolute;
		top: -25px;
		left: 0;
		width: 44%;
		z-index: 9;
	}




	.box {
		position: relative;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0px 0px 8px 5px;
	}

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 0px 0 6px;

		image {
			width: 18%;
		}

		text {
			font-size: 15px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.gboxlist {
		width: 100%;
		overflow-x: scroll;
		display: flex;
		align-content: center;

		.gpart {
			position: relative;
			width: 24%;
			background: url(http://image.qxgm.site/tdz/img/daolv/mg-17.png) no-repeat;
			background-size: 100% 100%;
			padding: 4px 0 12px 0;
			box-sizing: border-box;
			margin-right: 2px;
		}

		.suyuoo {
			position: absolute;
			width: 42px;
			top: 0;
			right: 0;
		}

		.filter {
			filter: grayscale(100%);
		}

		.gimgbx {
			display: block;
			margin: 0 auto;
			width: 72%;
			background: rgba(233, 205, 165, 0.63);
			border-radius: 50%;
			padding: 3px 2px 2px;
			box-sizing: border-box;
		}

		.glv {
			// width: 57%;
			font-size: 10px;
			height: 24px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 13px;
			box-sizing: border-box;
			background: url(http://image.qxgm.site/tdz/img/daolv/mg-07.png) no-repeat;
			background-size: 100% 100%;
			padding: 6px 9px 7px 3px;
			display: inline-block;
		}

		.vis {
			visibility: hidden;
		}

		.red {
			color: #A3741B;
		}

		.gnamenl {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 2px;
			text-align: center;
		}

		.ahab {
			display: block;
			width: 70%;
			margin: 2px auto 0;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-02.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 12px;
			padding: 3px 0;
			zoom: 0.84;
		}
	}

	.warp3 {
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.showHandler {
		animation: showHandler 0.8s forwards ease;
	}

	.hideHandler {
		animation: hideHandler 0.8s forwards ease;
	}

	@keyframes showHandler {
		0% {
			bottom: -50%;
		}

		100% {
			bottom: 0%;
		}
	}

	@keyframes hideHandler {
		0% {
			bottom: 0%;
		}

		100% {
			bottom: -50%;
		}
	}

	.m_close3 {
		position: absolute;
		top: -5%;
		right: 8px;
		width: 32px;
	}

	.m_info3 {
		display: block;
		margin: 0 auto;
		width: 100%;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		min-height: 280px;
	}

	.m_info4 {
		display: block;
		margin: 0 auto;
		width: 100%;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 10px 0 5px;
	}

	.mask_content3 {
		.m_info3 {
			padding: 0% 6px 10px;
			box-sizing: border-box;
		}

	}

	.yun_mask {
		position: absolute;
		left: 0;
		top: -8%;
		width: 43%;
		z-index: 9;
	}

	.btnleft {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.gundong {
		height: 260px;
		background: url(http://image.qxgm.site/tdz/img/daolv/mg-02.png) no-repeat;
		background-size: 100% 100%;
	}

	.caolist {
		display: flex;
		flex-wrap: wrap;
		padding: 5px 7px;

		.link {
			position: relative;
			width: 20%;
			margin-bottom: 10px;
		}

		.cpart {
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq1 {
			width: 100%;
		}

		.cq2 {
			width: 94%;
			text-align: center;
			position: absolute;
			bottom: 4px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 20px;
			text-shadow: 0 1px 1px #000;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-18.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq3 {
			width: 42px;
			height: 20px;
			position: absolute;
			text-align: center;
			top: -5px;
			left: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
			background-size: 100% 100%;
		}


		.cname {
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 12px;
			text-shadow: 0 1px 1px #000000;
			margin-top: 4px;
			text-align: center;
			height: 23px;
		}

		.filet {
			filter: grayscale(100%);
		}

		.zhuang {
			display: block;
			margin: 5px auto 0;
			width: 90%;
			text-align: center;
			font-size: 12px;
			font-weight: normal;
			color: #fdf1c4;
			text-shadow: 0 1px 1px #CB6500;
			height: 25px;
			line-height: 25px;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.sendAll {
		display: block;
		margin: 10px auto 0;
		width: 116px;
		height: 37px;
		text-align: center;
		font-size: 18px;
		font-weight: normal;
		color: #fdf1c4;
		text-shadow: 0 1px 1px #CB6500;
		line-height: 37px;
		background: url(http://image.qxgm.site/tdz/img/public/btn7.png) no-repeat;
		background-size: 100% 100%;
	}

	.tantabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;

		.tab {
			width: 16.6%;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-05.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			box-sizing: border-box;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/daolv/smg-04.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.jihuop2 {
		padding: 0 7%;

		.rep1 {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
			line-height: 24px;
			padding: 0 10px;
		}

		.red {
			color: #FF461D;
		}

		.tboan {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/daolv/mg-01.png) no-repeat;
			background-size: 100% 100%;
			padding: 5px 10px;
			margin-top: 2vh;
		}

		.tbimg {
			width: 70px;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
			padding: 13px 8px 10px 12px;
			box-sizing: border-box;
		}

		.uoan {
			flex: 1;
			margin-left: 5px;
			width: 50%;
		}

		.an1 {
			font-size: 18px;
			font-weight: normal;
			color: #333333;
			line-height: 18px;
			margin-bottom: 11px;
		}

		.an2 {
			font-size: 14px;
			font-weight: normal;
			color: #FF3333;
			line-height: 14px;
		}

		.refineCon {
			width: 67px;
			height: 33px;
			font-size: 16px;
			font-weight: normal;
			color: #fef8c8;
			line-height: 33px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}
	}


	.caolist2 {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		overflow-y: scroll;
		background: url(http://image.qxgm.site/tdz/img/daolv/mg-02.png) no-repeat;
		background-size: 100% 100%;
		padding: 5px 7px;

		.link {
			position: relative;
			width: 20%;
			margin-bottom: 10px;
		}

		.cpart {
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq1 {
			width: 100%;
		}

		.cq2 {
			width: 94%;
			text-align: center;
			position: absolute;
			bottom: 4px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 20px;
			text-shadow: 0 1px 1px #000;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-18.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq3 {
			width: 42px;
			height: 20px;
			position: absolute;
			text-align: center;
			top: -5px;
			left: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
			background-size: 100% 100%;
		}


		.cname {
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 12px;
			text-shadow: 0 1px 1px #000000;
			margin-top: 4px;
			text-align: center;
		}

		.filet {
			filter: grayscale(100%);
		}

		.zhuang {
			display: block;
			margin: 5px auto 0;
			width: 90%;
			text-align: center;
			font-size: 12px;
			font-weight: normal;
			color: #fdf1c4;
			text-shadow: 0 1px 1px #CB6500;
			height: 25px;
			line-height: 25px;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.gbsoxlist {
		display: flex;
		flex-direction: column;
		padding: 10px 18% 10px;
	}

	.daolbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0px 14px 0px;

		.opart {
			position: relative;
			width: 50%;
			background: url(http://image.qxgm.site/tdz/img/daolv/emg-01.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			padding: 20px 0 16px;
		}

		.yuanhuan {
			display: block;
			margin: 0 auto;
			width: 88%;
			padding: 16% 0%;
			background: url(http://image.qxgm.site/tdz/img/daolv/emg-07.png) no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
		}

		.ytou {
			display: block;
			margin: 0 auto;
			width: 63%;
		}

		.op1 {
			font-size: 15px;
			font-weight: normal;
			color: #FFFFFF;
		}

		.op2 {
			position: absolute;
			top: 0px;
			right: 0px;
			background: url(http://image.qxgm.site/tdz/img/daolv/mg-05.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			width: 56px;
			height: 56px;
			box-sizing: border-box;
			padding: 11px 0px 13px;
		}

		.aihao1 {
			font-size: 12px;
			color: #fff;
			line-height: 12px;
			margin-bottom: 8px;
		}

		.aihao2 {
			font-size: 20px;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 20px;
			background: linear-gradient(0deg, #FFECB2 0%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.op3 {
			position: absolute;
			left: 15px;
			top: 20%;
			font-size: 12px;
			font-weight: normal;
			color: #D2AFE2;
			word-wrap: break-word;
			/*英文的时候需要加上这句，自动换行*/
			/*自测了这句话没啥用*/
			writing-mode: vertical-rl;
			/*从左向右 从右向左是 writing-mode: vertical-rl;*/
			writing-mode: tb-rl;
			/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
			text-align: center;
			padding: 0px;
			display: flex;
			-webkit-display: flex;
			flex-direction: column;
			/* align-content: center; */
			/* vertical-align: middle; */
			justify-content: center;
			background: url(http://image.qxgm.site/tdz/img/daolv/emg-06.png) no-repeat;
			background-size: 100% 100%;
			padding: 23px 2px;
		}

		.huafeil {
			display: block;
			margin: 0 auto 0;
			width: 55%;
			font-size: 12px;
			font-weight: normal;
			color: #DEDEDE;
			padding: 4px 0;
			background: url(http://image.qxgm.site/tdz/img/yaoyuan/mg-08.png) no-repeat;
			background-size: 100% 100%;
		}

		.yqdao {
			display: block;
			margin: 0 auto;
			width: 82px;
			height: 26px;
			font-size: 13px;
			font-weight: normal;
			color: #fbf4bd;
			line-height: 26px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.vis {
		visibility: hidden;
	}


	// 双修动画
	.donghuabox {
		position: relative;
		width: 100%;
		height: 100%;

		.animal {
			width: 100%;
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #fff;
		}

		.ani {
			width: 100%;
		}

		.ani1 {
			width: 100%;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.anmbox {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
		}

		.anbxo {
			box-sizing: border-box;
			padding: 10px;
			overflow: hidden;
			position: relative;
			margin-top: 20%;
		}

		.renwu1 {
			position: absolute;
			top: 20%;
			left: 0;
			width: 45%;
			filter: grayscale(0%);
			opacity: 1;
		}

		.renwu2 {
			position: absolute;
			top: 20%;
			right: 0;
			width: 45%;
			filter: grayscale(0%);
			opacity: 1;
		}

		.xingdong {
			width: 25%;
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translateX(-50%);
		}

		.translate {
			animation: myfirst 3s;
			-webkit-animation: myfirst 3s;
		}

		.translate2 {
			animation: myfirst2 3s;
			-webkit-animation: myfirst2 3s;
		}


	}

	@keyframes myfirst {
		0% {
			left: 0;
			filter: grayscale(0%);
			opacity: 1;
		}

		90% {
			left: 20%;
			filter: grayscale(90%);
			opacity: 0.1;
		}

		100% {
			left: 20%;
			filter: grayscale(100%);
			opacity: 0;
		}
	}

	@keyframes myfirst2 {
		0% {
			right: 0;
			filter: grayscale(0%);
			opacity: 1;
		}

		90% {
			right: 15%;
			filter: grayscale(90%);
			opacity: 0.1;
		}

		100% {
			right: 15%;
			filter: grayscale(100%);
			opacity: 0;
		}
	}


	.plist {
		margin-top: 14px;

		.clst1 {
			font-weight: normal;
			font-size: 20px;
			color: #333333;
			line-height: 22px;
			text-align: center;
		}

		.clst2 {
			font-weight: normal;
			font-size: 20px;
			color: #333333;
			line-height: 24px;
			text-align: center;
			margin-top: 22px;
		}

		.tcolor {
			color: #FF6699;
		}
	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}




	.jihuop {
		padding: 0 10%;

		.tanp1 {
			font-size: 18px;
			font-weight: normal;
			color: #50433A;
			line-height: 30px;
			text-align: center;
		}

		.tanp2 {
			font-weight: normal;
			font-size: 18px;
			color: #0290D7;
			line-height: 24px;
			text-align: center;
			margin-top: 2vh;
		}

		.btn3 {
			display: block;
			margin: 3vh auto 0;
			width: 116px;
			height: 37px;
			font-size: 18px;
			font-weight: normal;
			line-height: 37px;
			color: #fefbca;
			text-align: center;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}

		.chipt {
			background: #bcb8ba;
			border-radius: 1px;
			text-align: center;
			padding: 13px 0;
			margin-top: 18px;
		}

		.chaon {
			font-size: 15px;
			color: #666666;
			line-height: 15px;
			text-align: center;
		}

		.btnss {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 3vh;

			.btn1 {
				width: 116px;
				height: 37px;
				font-size: 18px;
				font-weight: normal;
				line-height: 37px;
				color: #fefbca;
				text-align: center;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/ceo/mg-05.png) no-repeat;
				background-size: 100% 100%;
			}

			.btn2 {
				width: 116px;
				height: 37px;
				font-size: 18px;
				font-weight: normal;
				line-height: 37px;
				color: #fefbca;
				text-align: center;
				text-shadow: 0 1px 1px #CB6500;
				background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
				background-size: 100% 100%;
			}

		}

		.tannamen {
			font-weight: normal;
			font-size: 15px;
			color: #0099CC;
			line-height: 15px;
			text-align: center;
			margin-top: 6px;
		}

		.tandaok {
			display: block;
			margin: 10px auto 0;
			width: 90px;
		}

		.anaono {
			font-weight: normal;
			font-size: 15px;
			color: #333333;
			line-height: 18px;
			margin-top: 5px;
		}

		.ailist {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10px;

			image {
				width: 41px;
			}
		}

		.tandaok2 {
			display: block;
			margin: 10px auto 0;
			width: 64px;
		}

		.tanp11 {
			font-weight: normal;
			font-size: 15px;
			color: #0099CC;
			line-height: 15px;
			margin-top: 9px;
			text-align: center;
		}

		.tanp22 {
			font-weight: normal;
			font-size: 15px;
			color: #663366;
			line-height: 15px;
			text-align: center;
			margin-top: 10px;
		}

		.tkann {
			display: block;
			margin: 10px auto 0;
			width: 86px;

			.tking {
				width: 100%;
				background: url(http://image.qxgm.site/tdz/img/duobao/kuang.png) no-repeat;
				background-size: 100% 100%;
			}

		}


	}
</style>